<template>
  <Header/>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3 animate__animated animate__fadeInLeft">
        <!-- 文章卡片父容器 -->
        <div
            class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <!-- 面包屑 -->
          <nav class="flex text-gray-400" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
              <li class="inline-flex items-center">
                <a href="#"
                   class="inline-flex items-center text-sm font-medium hover:text-blue-600 dark:text-gray-300 dark:hover:text-white">
                  <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor" viewBox="0 0 20 20">
                    <path
                        d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
                  </svg>
                  首页
                </a>
              </li>
              <li>
                <div class="flex items-center">
                  /
                  <a href="#"
                     class="ml-1 text-sm font-medium md:ml-3 dark:text-gray-400 dark:hover:text-white">正文</a>
                </div>
              </li>
            </ol>
          </nav>

          <!-- 文章 -->
          <article>
            <!-- 文章标题 -->
            <h1 class="mt-4 font-bold text-3xl dark:text-white">{{ articleInfo.title }}</h1>
            <!-- 文章 meta 信息，如发布时间等 -->
            <div class="text-gray-400 flex items-center mt-5 text-sm">
              <!-- 发布时间 -->
              <svg t="1710687588480" class="inline w-5 h-5 mr-2 dark:text-white" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="6349" width="200" height="200">
                <path
                    d="M511.593 738.332c97.409 0 176.661-79.291 176.661-176.64 0-97.409-79.251-176.64-176.661-176.64-97.389 0-176.621 79.251-176.621 176.64s79.211 176.64 176.621 176.64z"
                    fill="#CFCF5A" p-id="6350"></path>
                <path
                    d="M507.198 738.097c1.483 0.037 2.913 0.235 4.413 0.235 97.556 0 176.64-79.085 176.64-176.64 0-97.556-79.085-176.64-176.64-176.64-1.483 0-2.913 0.175-4.413 0.217-94.775 2.342-170.979 79.211-172.113 174.277-0.020 0.704-0.116 1.405-0.116 2.128 0 96.081 76.714 174.066 172.226 176.43z"
                    fill="#FFFFFF" p-id="6351"></path>
                <path
                    d="M717.071 561.692c0 32.743-7.907 64.997-23.022 94.033h48.245c5.153 0 9.9 2.754 12.517 7.206 2.541 4.471 2.541 9.979 0 14.428-2.547 4.327-7.186 7.185-12.491 7.185-0.005 0-0.019 0-0.025 0h-66.421c-37.508 50.042-97.098 82.59-164.281 82.59-68.143 0-128.474-33.488-165.884-84.757-2.051 1.334-4.555 2.135-7.246 2.148l-239.527-0.001v130.445c0 21.943 18.998 42.623 44.009 42.623h737.334c24.092 0 40.573-21.633 40.533-42.623v-130.445h-77.593c-0.023 0-0.054 0-0.085 0-7.936 0-14.37-6.433-14.37-14.37 0-2.669 0.727-5.17 1.996-7.312 2.506-4.27 7.143-7.139 12.451-7.139 0.001 0 0.002 0 0.003 0h77.593v-172.991h-219.596c10.485 25.009 15.872 51.858 15.854 78.977zM880.237 324.093h-87.453c-10.387 0-19.974-5.097-25.070-14.097l-6.112-10.701h-500.714l-4.609 9.277c-4.823 9.301-14.377 15.548-25.391 15.548-0.157 0-0.31-0.001-0.463-0.002h-87.468c-22.905 0-44.009 18.844-44.009 41.92v87.861h238.066c36.259-58.515 100.866-97.661 174.588-97.661s138.295 39.147 174.553 97.661h234.65v-87.861c0-19.819-14.683-41.939-40.573-41.939z"
                    fill="#CFCF5A" p-id="6352"></path>
                <path
                    d="M702.485 195.679c-16.012-20.657-38.23-29.344-73.902-29.344l-261.671-0.097c-22.432 0-35.204 1.309-53.732 28.31l-52.288 104.769h500.734l-59.142-103.639z"
                    fill="#CFCF5A" p-id="6353"></path>
                <path
                    d="M528.813 421.559c-57.321 0.167-107.455 30.784-135.085 76.527-1.35 2.518-1.962 4.822-1.962 7.265 0 7.98 6.467 14.45 14.45 14.45 4.985 0 9.38-2.524 11.977-6.362 22.949-37.963 63.916-62.941 110.718-63.017 7.553-0.407 13.597-6.714 13.597-14.428 0-7.714-6.049-14.019-13.665-14.428zM392.918 532.245c-0.987-0.24-2.116-0.378-3.281-0.378-6.807 0-12.506 4.718-14.019 11.060-2.657 11.322-4.14 18.334-4.14 31.026-0.007 0.225-0.020 0.485-0.020 0.751 0 7.969 6.461 14.428 14.428 14.428 7.969 0 14.428-6.461 14.428-14.428 0-0.262-0.004-0.526-0.021-0.787 0.001-9.529 1.037-14.313 3.36-24.31 0.241-0.991 0.38-2.128 0.38-3.297 0-6.802-4.697-12.499-11.021-14.042z"
                    fill="#848D2F" p-id="6354"></path>
                <path
                    d="M321.966 482.713h-223.034v173.010h230.217c-14.522-27.326-23.047-59.749-23.047-94.164 0-28.464 5.834-55.564 16.366-80.174z"
                    fill="#CFCF5A" p-id="6355"></path>
                <path
                    d="M799.972 655.722h-14.407c-0.225-0.007-0.485-0.020-0.751-0.020-7.969 0-14.428 6.461-14.428 14.428 0 7.969 6.461 14.428 14.428 14.428 0.262 0 0.526-0.004 0.787-0.021l14.374 0.001c7.958 0 14.407-6.452 14.407-14.407s-6.452-14.407-14.407-14.407z"
                    fill="#848D2F" p-id="6356"></path>
                <path
                    d="M880.258 266.415h-70.739l-57.891-101.412c-0.566-1.036-1.23-1.795-1.934-2.735-13.019-17.038-29.566-30.71-48.611-40.078 8.391-1.413-26.775-14.397-72.521-14.397l-261.691 0.217c-28.938 0-59.492 3.535-89.599 38.465-4.353 5.037-8.69 10.737-13.005 17.184-0.704 1.036-1.326 1.892-1.892 2.987l-49.825 99.753h-69.61c-58.107 0-101.667 46.117-101.667 99.595v448.973c0 53.927 44.559 100.3 101.667 100.3h737.334c52.854 0 98.228-42.582 98.228-100.3v-448.955c0-57.147-44.514-99.595-98.249-99.595zM98.935 482.713h223.034c-10.020 23.28-15.844 50.378-15.844 78.837 0 34.412 8.522 66.839 23.569 95.28l-230.754-1.109v-173.010zM920.812 655.722h-77.593c-0.225-0.007-0.485-0.020-0.751-0.020-7.969 0-14.428 6.461-14.428 14.428 0 7.969 6.461 14.428 14.428 14.428 0.262 0 0.526-0.004 0.787-0.021l77.554 0.001v130.445c0.037 20.97-16.441 42.623-40.533 42.623h-737.334c-25.009 0-44.009-20.677-44.009-42.623v-130.445h239.628c2.695-0.039 5.193-0.861 7.284-2.246 37.257 51.372 97.584 84.858 165.729 84.858 67.187 0 126.774-32.567 164.281-82.59h66.421c0.004 0 0.019 0 0.023 0 5.303 0 9.94-2.858 12.451-7.118 1.234-2.141 1.941-4.629 1.941-7.284 0-2.655-0.705-5.141-1.941-7.286-2.519-4.267-7.163-7.132-12.477-7.133h-48.243c14.508-27.323 23.027-59.743 23.027-94.146 0-28.47-5.834-55.577-16.366-80.193l220.080 1.328v172.991zM334.967 561.692c0-0.723 0.097-1.428 0.116-2.128 1.184-95.027 77.301-171.891 171.922-174.274 1.654-0.042 3.099-0.22 4.58-0.22h0.020c97.556 0 176.64 79.085 176.64 176.64s-79.085 176.64-176.64 176.64h-0.020c-1.463 0-2.913-0.194-4.393-0.235-95.516-2.383-172.226-80.365-172.226-176.43zM920.812 453.876h-234.65c-36.259-58.515-100.825-97.661-174.553-97.661s-138.333 39.147-174.588 97.661h-238.084v-87.861c0-23.079 21.106-41.92 44.009-41.92h87.489c10.934 0 20.931-5.721 25.831-15.54l4.609-9.277 52.288-104.769c18.53-26.982 31.298-28.31 53.732-28.31l261.671 0.097c35.67 0 57.891 8.69 73.902 29.344l65.232 114.317c5.097 9.004 14.683 14.097 25.070 14.097h87.453c25.871 0 40.551 22.101 40.551 41.92v87.901z"
                    fill="#504C23" p-id="6357"></path>
              </svg>
              <span class="hidden md:inline mr-1">发表于</span>
              {{ articleInfo.createTime }}

              <!-- 分类 -->
              <svg t="1710687737112" class="inline w-5 h-5 ml-5 mr-2 dark:text-white" viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="9310" width="200" height="200">
                <path
                    d="M136 232v560h752V360H525.255a104 104 0 0 1-73.54-30.46L354.178 232H136z m-40-72h274.745a32 32 0 0 1 22.628 9.373l109.254 109.254A32 32 0 0 0 525.255 288H928c17.673 0 32 14.327 32 32v512c0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32V192c0-17.673 14.327-32 32-32z m296 464h240a8 8 0 0 1 8 8v48a8 8 0 0 1-8 8H392a8 8 0 0 1-8-8v-48a8 8 0 0 1 8-8z"
                    fill="#5090F1" p-id="9311"></path>
              </svg>
              <a @click="gotoCategory(articleInfo.categoryId, articleInfo.categoryName)"
                 class="hover:underline cursor-pointer">{{ articleInfo.categoryName }}</a>

              <!-- 阅读量 -->
              <svg t="1710687899817" class="inline w-5 h-5 ml-5 mr-2 dark:text-white" viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="13947" width="200" height="200">
                <path
                    d="M736.241 366.2c-29.9 48.5-67.272 70.888-67.272 70.888 71.009-283.55-224.24-373.092-224.24-373.092C530.687 377.39 142 403.506 142 657.209s298.991 298.473 298.991 298.473C183.115 672.133 512 511.7 512 511.7s-56.06 82.079 78.485 212.663c97.17 89.542-11.212 231.316-11.212 231.316C676.443 955.682 882 828.831 882 657.209 882 481.855 736.241 366.2 736.241 366.2"
                    fill="#FD6F48" p-id="13948"></path>
                <path
                    d="M440.991 955.682c11.212 7.462 138.282 3.731 145.756 0 22.424-18.655 100.908-141.774 3.738-231.316C455.941 593.782 512 511.7 512 511.7s-328.886 160.431-71.009 443.98"
                    fill="#FFD02B" p-id="13949"></path>
              </svg>
              <span class="hidden md:inline mr-1">阅读量</span>{{ articleInfo.readNum }}

              <svg t="1710687523160" class="inline w-5 h-5 ml-5 mr-2 dark:text-white" viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4462" width="200" height="200">
                <path
                    d="M512.4 869.3c-197 0-357.3-160.3-357.3-357.3s160.3-357.3 357.3-357.3S869.7 315 869.7 512 709.4 869.3 512.4 869.3z"
                    fill="#D6292C" p-id="4463"></path>
                <path
                    d="M512 264.3c-11.6 0-21-9.4-21-21v-54.2c0-11.6 9.4-21 21-21s21 9.4 21 21v54.2c0 11.6-9.4 21-21 21zM512 856.9c-11.6 0-21-9.4-21-21v-54.2c0-11.6 9.4-21 21-21s21 9.4 21 21v54.2c0 11.6-9.4 21-21 21zM242.5 533h-54.2c-11.6 0-21-9.4-21-21s9.4-21 21-21h54.2c11.6 0 21 9.4 21 21s-9.4 21-21 21zM835.1 533h-54.2c-11.6 0-21-9.4-21-21s9.4-21 21-21h54.2c11.6 0 21 9.4 21 21s-9.4 21-21 21z"
                    fill="#FFFFFF" p-id="4464"></path>
                <path
                    d="M512.4 175.7c89.8 0 174.3 35 237.8 98.5s98.5 148 98.5 237.8-35 174.3-98.5 237.8-148 98.5-237.8 98.5-174.3-35-237.8-98.5S176 601.8 176 512s35-174.3 98.5-237.8 148-98.5 237.9-98.5m0-42c-208.9 0-378.3 169.4-378.3 378.3s169.4 378.3 378.3 378.3S890.7 720.9 890.7 512 721.3 133.7 512.4 133.7z"
                    fill="#E67F80" p-id="4465"></path>
                <path d="M512.4 512m-47.8 0a47.8 47.8 0 1 0 95.6 0 47.8 47.8 0 1 0-95.6 0Z" fill="#FFFFFF"
                      p-id="4466"></path>
                <path
                    d="M512 531.4c-4.3 0-8.7-1.3-12.4-4.1-9.3-6.9-11.3-20-4.5-29.3l150.7-204.9c6.9-9.3 20-11.3 29.3-4.5 9.3 6.9 11.3 20 4.5 29.3L529 522.8c-4.2 5.6-10.5 8.6-17 8.6z"
                    fill="#FFFFFF" p-id="4467"></path>
                <path d="M284.4 439.3c-85.4 0-155-69.5-155-155s69.5-155 155-155 155 69.5 155 155-69.6 155-155 155z"
                      fill="#D6292C" p-id="4468"></path>
                <path
                    d="M284.4 150.4c74 0 134 60 134 134s-60 134-134 134-134-60-134-134 60-134 134-134m0-42c-97 0-175.9 78.9-175.9 175.9s78.9 175.9 175.9 175.9 175.9-78.9 175.9-175.9-78.9-175.9-175.9-175.9z"
                    fill="#FFFFFF" p-id="4469"></path>
                <path
                    d="M195.9 323.7c31.4-28.6 52.6-51.4 52.6-69.6 0-11.5-6.4-17.7-16.4-17.7-8.6 0-15.4 5.7-21.3 12.2l-16.4-16.2c12.3-13 23.8-19.4 41.7-19.4 24.3 0 41.2 15.5 41.2 39.5 0 21.6-18.6 45.5-37.9 64.9 6.3-0.8 14.9-1.7 20.4-1.7h23.1V341h-87.2v-17.3z"
                    fill="#FFFFFF" p-id="4470"></path>
                <path
                    d="M373.4 309.5h-14v31.4h-28v-31.4h-52.7v-20.8l43.8-73.5h37v71.5h14v22.8z m-42.1-22.9v-18.4c0-7.9 0.8-19.9 1.2-27.9h-0.7c-3.2 7.1-6.6 14.4-10.1 21.5l-14.4 24.8h24z"
                    fill="#FFFFFF" p-id="4471"></path>
              </svg>
              {{ articleInfo.readTime }}

              <svg t="1710689247395" class="inline w-5 h-5 ml-5 mr-2 dark:text-white" viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="32412" width="200" height="200">
                <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#1882F0" p-id="32413"></path>
                <path
                    d="M762.778 320.102A71.885 71.885 0 0 1 768 347.034a42.291 42.291 0 0 1-2.918 15.155 46.438 46.438 0 0 1-9.319 14.643 650.39 650.39 0 0 1-12.493 12.288c-3.686 3.533-6.912 6.656-9.625 9.37a196.963 196.963 0 0 1-8.704 8.192L615.936 297.267c4.66-4.3 10.24-9.472 16.64-15.513s11.725-10.804 15.974-14.336a51.046 51.046 0 0 1 34.1-11.367c5.632 0.154 11.059 1.024 16.281 2.611 5.274 1.536 9.83 3.328 13.722 5.274 8.14 4.3 17.152 11.776 27.033 22.528 9.933 10.752 17.562 21.914 23.04 33.638zM309.146 605.594l16.281-16.692c8.55-8.755 19.2-19.61 32.051-32.46l42.496-42.701 47.156-47.411 125.184-125.748L681.216 450.56 556.032 576.307l-46.592 47.411a3265.758 3265.758 0 0 0-41.933 41.83c-12.39 12.647-22.681 23.092-30.873 31.284a252.416 252.416 0 0 1-27.904 25.14c-5.12 3.942-10.292 7.065-15.77 9.369a253.594 253.594 0 0 1-23.86 9.933 804.71 804.71 0 0 1-65.535 21.094c-10.24 2.714-17.92 4.454-22.989 5.274-10.445 1.177-17.408-0.41-20.992-4.71-3.43-4.302-4.403-11.47-2.867-21.658a198.144 198.144 0 0 1 5.53-23.655 2863.077 2863.077 0 0 1 9.318-32.205 922.476 922.476 0 0 1 9.625-30.72c3.072-9.318 5.632-15.77 7.578-19.302 2.304-5.427 4.915-10.394 7.834-14.9a96.256 96.256 0 0 1 12.544-14.898z"
                    fill="#FFFFFF" p-id="32414"></path>
              </svg>
              {{ articleInfo.wordCount }}<span class="hidden md:inline mr-1">&nbsp字</span>
            </div>

            <!-- 标签集合 -->
            <div class="mt-5">
              <span v-for="item in articleInfo.tags"
                    class="inline-block mb-1 cursor-pointer bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-3 py-1 rounded-full hover:bg-blue-200 hover:text-blue-900 dark:bg-blue-900 dark:text-blue-300"
                    @click="gotoTag(item.id, item.name)">
                                # {{ item.name }}
              </span>
            </div>

            <!-- 正文 -->
            <div :class="{ 'dark': isDark }">
              <div ref="articleContentRef" v-viewer class="mt-4 article-content"
                   v-html="articleInfo.content">
              </div>
            </div>
            <!-- 上下篇 -->
            <nav class="flex flex-row mt-7 cursor-pointer">
              <!-- basis-1/2 用于占用 flex 布局的一半空间 -->
              <div v-if="articleInfo.preArticle" class="basis-1/2">
                <!-- h-full 指定高度占满 -->
                <a @click="gotoArticleDetail(articleInfo.preArticle.articleId)"
                   class="flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    <svg class="inline w-3.5 h-3.5 mr-2 mb-1" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path>
                    </svg>
                    上一篇
                  </div>
                  <div>{{ articleInfo.preArticle.articleTitle }}</div>
                </a>
              </div>

              <div v-else class="basis-1/2">
                <!-- h-full 指定高度占满 -->
                <a href="#"
                   class="flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    <svg class="inline w-3.5 h-3.5 mr-2 mb-1" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path>
                    </svg>
                    回到主页
                  </div>
                </a>
              </div>

              <div v-if="articleInfo.nextArticle" class="basis-1/2">
                <!-- text-right 指定文字居右显示 -->
                <a @click="gotoArticleDetail(articleInfo.nextArticle.articleId)"
                   class="flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    下一篇
                    <svg class="inline w-3.5 h-3.5 ml-2 mb-1" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
                    </svg>
                  </div>
                  <div>{{ articleInfo.nextArticle.articleTitle }}</div>
                </a>
              </div>

              <div v-else class="basis-1/2">
                <!-- text-right 指定文字居右显示 -->
                <a href="#"
                   class="flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                  <div>
                    回到主页
                    <svg class="inline w-3.5 h-3.5 ml-2 mb-1" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
                    </svg>
                  </div>
                </a>
              </div>
            </nav>
          </article>

        </div>

      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1 animate__animated animate__fadeInRight">
        <div>
          <!-- 博主信息 -->
          <UserInfo/>
          <!-- 分类 -->
          <CategoryInfo/>
          <!-- 标签 -->
          <TagInfo/>
        </div>
        <Toc/>
      </aside>
    </div>

  </main>
  <ScrollToTopButton/>

  <Footer/>
</template>

<script setup>

import UserInfo from "@/layouts/fronted/components/UserInfo.vue";
import Footer from "@/layouts/fronted/components/Footer.vue";
import Header from "@/layouts/fronted/components/Header.vue";
import CategoryInfo from "@/layouts/fronted/components/CategoryInfo.vue";
import TagInfo from "@/layouts/fronted/components/TagInfo.vue";
import {useRoute, useRouter} from 'vue-router'
import {ref, watch, onMounted, nextTick} from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/tokyo-night-dark.css' // 代码高亮样式
import {queryArticleDetail} from "@/api/frontend/article.js"
import ScrollToTopButton from "@/components/ScrollToTopButton.vue";
import Toc from "@/layouts/fronted/components/Toc.vue";
import { useDark } from '@vueuse/core'

// 是否是暗黑模式
const isDark = useDark()
const route = useRoute()
const router = useRouter()
const articleInfo = ref({})
const articleContentRef = ref(null)

onMounted(() => {
  getArticleInfo()
})

// 获取文章详情
function getArticleInfo() {
  queryArticleDetail(route.params.articleId).then(resp => {
    if (!resp.success && resp.errorCode == '230000') {
      // 手动跳转 404 页面
      router.push({name: 'NotFound'})
      return
    }
    articleInfo.value = resp.data
    articleInfo.value.createTime = articleInfo.value.createTime.split(" ")[0]

    nextTick(() => {
      // 获取所有 pre code 节点
      let highlight = document.querySelectorAll('pre code')
      // 循环高亮
      highlight.forEach((block) => {
        hljs.highlightElement(block)
      })

      let preElements = document.querySelectorAll('pre')
      preElements.forEach(preElement => {
        // 找到第一个 code 元素
        let firstCode = preElement.querySelector('code');
        if (firstCode) {
          let copyCodeBtn = '<button class="hidden copy-code-btn flex items-center justify-center"><div class="copy-icon"></div></button>'
          firstCode.insertAdjacentHTML('beforebegin', copyCodeBtn);

          // 获取刚插入的按钮
          let copyBtn = firstCode.previousSibling;
          copyBtn.addEventListener('click', () => {
            // 添加 copied 样式
            copyBtn.classList.add('copied');
            copyToClipboard(preElement.textContent)
            // 1.5 秒后移除 copied 样式
            setTimeout(() => {
              copyBtn.classList.remove('copied');
            }, 1500);
          });
        }

        // 添加事件监听器
        preElement.addEventListener('mouseenter', handleMouseEnter);
        preElement.addEventListener('mouseleave', handleMouseLeave);
      })
    })
  })
}

// 复制内容到剪切板
function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text + `"原文链接：https://liuche17.cn/#${route.fullPath}"`;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

// 鼠标移入移出操作
const handleMouseEnter = (event) => {
  // 鼠标移入，显示按钮
  let copyBtn = event.target.querySelector('button');
  if (copyBtn) {
    copyBtn.classList.remove('hidden');
    copyBtn.classList.add('block');
  }
}

const handleMouseLeave = (event) => {
  // 鼠标移出，隐藏按钮
  let copyBtn = event.target.querySelector('button');
  if (copyBtn) {
    copyBtn.classList.add('hidden');
  }
}

function gotoArticleDetail(id) {
  router.push("/article/detail/" + id)
}

// 监听路由
watch(route, (newRoute, oldRoute) => {
  // 重新渲染文章详情
  getArticleInfo(newRoute.params.articleId)
})

// 跳转至标签详情页
const gotoTag = (id, name) => {
  router.push({path: "/tag/article/list", query: {id, name}})
  currentTagId.value = id
}

// 跳转至分类详情页
const gotoCategory = (id, name) => {
  router.push({path: "/category/article/list", query: {id, name}})
  currentCategoryId.value = id
}

</script>

<style scoped>
.max-w-sm {
  max-width: 48rem;
}

/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6) {
  color: #292525;
  line-height: 150%;
  font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

::v-deep(.article-content h2) {
  line-height: 1.5;
  font-weight: 700;
  font-synthesis: style;
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 26px;
  line-height: 140%;
  border-bottom: 1px solid rgb(241 245 249);
  padding-bottom: 15px;
}

::v-deep(.article-content h3) {
  font-size: 20px;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 600;
}

::v-deep(.article-content h4) {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 16px;
  font-weight: 600;
}

::v-deep(.article-content h5) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
}

::v-deep(.article-content h6) {
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 14px;
  font-weight: 600;
}

/* p 段落样式 */
::v-deep(.article-content p) {
  letter-spacing: .3px;
  margin: 0 0 20px;
  line-height: 30px;
  color: #4c4e4d;
  font-weight: 400;
  word-break: normal;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

/* blockquote 引用样式 */
::v-deep(.article-content blockquote) {
  border-left: 2.3px solid rgb(52, 152, 219);
  quotes: none;
  background: rgb(236, 240, 241);
  color: #777;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 24px;
}

/* 设置 blockquote 中最后一个 p 标签的 margin-bottom 为 0 */
::v-deep(.article-content blockquote p:last-child) {
  margin-bottom: 0;
}

/* 斜体样式 */
::v-deep(.article-content em) {
  color: #c849ff;
}

/* 超链接样式 */
::v-deep(.article-content a) {
  color: #167bc2;
}

::v-deep(.article-content a:hover) {
  text-decoration: underline;
}

/* ul 样式 */
::v-deep(.article-content ul) {
  padding-left: 2rem;
}

::v-deep(.article-content ul) {
  margin-bottom: 20px;
}

::v-deep(.article-content ul li) {
  list-style-type: disc;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
}

::v-deep(.article-content ul li p) {
  margin-bottom: 0 !important;
}

::v-deep(.article-content ul ul li) {
  list-style-type: square;
}

/* ol 样式 */
::v-deep(.article-content ol) {
  list-style-type: decimal;
  padding-left: 2rem;
}

/* 图片样式 */
::v-deep(.article-content img) {
  max-width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

::v-deep(.article-content img:hover,
img:focus) {
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .15);
}

/* 图片描述文字 */
::v-deep(.image-caption) {
  min-width: 20%;
  max-width: 80%;
  min-height: 43px;
  display: block;
  padding: 10px;
  margin: 0 auto;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* code 样式 */
::v-deep(.article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: 95% !important;
  border-radius: 4px;
  color: rgb(41, 128, 185);
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(table) {
  margin-bottom: 20px;
  width: 100%;
}

::v-deep(table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

::v-deep(table th) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

::v-deep(table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

/* hr 横线 */
::v-deep(hr) {
  margin-bottom: 20px;
}

/* code 样式 */
::v-deep(.article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: 95% !important;
  border-radius: 4px;
  color: rgb(41, 128, 185);
  background-color: rgba(27, 31, 35, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* pre code 样式 */
::v-deep(code) {
  font-size: 98%;
}

/* pre 样式 */
::v-deep(pre) {
  margin-bottom: 20px;
  padding-top: 30px;
  background: #21252b;
  border-radius: 6px;
  position: relative;
}

::v-deep(pre code.hljs) {
  padding: 0.7rem 1rem;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

::v-deep(pre:before) {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
  height: 10px;
  margin-top: -19px;
  margin-left: 10px;
  position: absolute;
  width: 10px;
}

::v-deep(.copy-code-btn) {
  border-width: 0;
  cursor: pointer;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 5;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity .4s;
  opacity: 1
}

::v-deep(.copy-code-btn:hover) {
  background: #2f3542;
}

::v-deep(.copy-icon) {
  --copy-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
  background: currentcolor;
  -webkit-mask-image: var(--copy-icon);
  mask-image: var(--copy-icon);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1em;
  mask-size: 1em;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.625rem;
  color: #9e9e9e;
  font-size: 1.25rem;
}

::v-deep(.copied) {
  display: flex;
  background: #2f3542;
}

::v-deep(.copied:after) {
  content: "已复制";
  position: absolute;
  top: 0;
  right: calc(100% + .25rem);
  display: block;
  height: 2.5rem;
  padding: .625rem;
  border-radius: .5rem;
  background: #2f3542;
  color: #9e9e9e;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

::v-deep(.copied .copy-icon) {
  --copied-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--copied-icon);
  mask-image: var(--copied-icon);
}


/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.dark .article-content h2) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
  border-bottom: 1px solid;
  border-color: rgb(55 65 81 / 1);
}

::v-deep(.dark .article-content h3) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h4) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h5) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

::v-deep(.dark .article-content h6) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity));
}

/* p 段落样式 */
::v-deep(.dark .article-content p) {
  color: #9e9e9e;
}

/* blockquote 引用样式 */
::v-deep(.dark .article-content blockquote) {
  quotes: none;
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  border-left: 2.3px solid #555;
  color: #666;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 0.25rem 0 0.25rem 1rem;
}

/* ul 样式 */
::v-deep(.dark .article-content ul) {
  padding-left: 2rem;
  color: #9e9e9e;
}

/* ol 样式 */
::v-deep(.dark .article-content ol) {
  color: #9e9e9e;
}

/* code 样式 */
::v-deep(.dark .article-content code:not(pre code)) {
  padding: 2px 4px;
  margin: 0 2px;
  font-size: .85em;
  border-radius: 5px;
  color: #abb2bf;
  background: #333;
  /* background-color: rgba(27, 31, 35, 0.05); */
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(.dark table tr) {
  background-color: rgb(31 41 55 / 1);
}

::v-deep(.dark table) {
  color: #9e9e9e;
}

::v-deep(.dark table th) {
  border: 1px solid #394048;
}

::v-deep(.dark table td) {
  border: 1px solid #394048;
}

::v-deep(.dark table tr:nth-child(2n)) {
  background-color: rgb(21 41 55 / 1);
}

/* hr 横线 */
::v-deep(.dark hr) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
</style>